import React from 'react'
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import * as couterActions from '../store/actions/counter.actions'

function Counter({count, increment, decrement}) {
  return (
    <div>
      <button onClick={increment}> + </button>
      <span>{count}</span>
      <button onClick={decrement}>- </button>
    </div>
  )
}

// connect 方法会帮助我们订阅 store 当store中的状态发生更改的时候，会帮助我们重新渲染组件
// connect 方法可以让我们获取 store 中的状态 将状态通过组件的props 属性映射给组件
// connect 方法可以让我们获取 dispatch 方法

const mapStateToProps = state => ({
  count: state.count
})


// const mapDispatchToProps = dispatch => ({
//   increment () {
//     dispatch({ type: 'increment'})
//   },
//   decrement () {
//     dispatch({ type: 'decrement'})
//   },
// })

const mapDispatchToProps = dispatch => bindActionCreators (couterActions, dispatch)

export default connect(mapStateToProps, mapDispatchToProps)(Counter);
